<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.global.js'></script>
</head>

<body>
    <div id="app">
        <!-- 在组件上叠加的class会被其模板的根布局继承 -->
        <my-component class="baz boo"></my-component>
        <my-component :class="{ active: isActive }"></my-component>
    </div>

    <script>
        const app = Vue.createApp({
            data(){
                return {
                    isActive:123
                }
            },

            /* 根组件中使用了my-component子组件 但由于my-component是全局组件 所以此处无需做子组件声明 */
        })

        /* 
        DaTuofent           大驼峰            Pascal-case
        xiaoTuofent         小驼峰            camel-case
        xiaozimu-huaxian    小写字母+中划线    kebab-case  
        */

        // 通过应用实例app去声明一个【全局组件】 名曰my-component 配置中有组件的模板
        // 全局组件者 其父组件不需要对它做components声明
        app.component('my-component', {
            template: `
            <p>
                <h3>whatever</h3>
            </p>
            `
        })

        app.mount("#app")
    </script>
</body>

</html>